<template>
    <div> <!--v-loading="loading" 已统一-->
        <div class="ly-filter">
            <el-input 
            placeholder="请输入要搜索的科室名称" 
            v-model="searchValue"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="success" @click="add">添加</el-button>
        </div>
        <el-table :data="tableData.records" border>
            <el-table-column label="编码" prop="code"></el-table-column>
            <el-table-column label="科室名称" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column label="科室类型" prop="type"></el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.delmark">有效</el-tag>
                    <el-tag type="danger" v-else>无效</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140px">
                <template #default="scope"> <!--scope.row 为当前行数据--> 
                    <template v-if="scope.row.delmark">
                        <el-button type="primary" size="small" plain @click="update(scope.row.id)">修改</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row.id,0)">删除</el-button>
                    </template>
                    <el-button v-else type="warning" size="small" @click="del(scope.row.id, 1)">还原</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
            style="margin-top: 10px;" 
            background 
            :total="tableData.total" 
            v-model:page-size="params.pageSize"
            v-model:current-page="params.pageNo" 
            @change="getTableData">
        </el-pagination>
        <!--添加科室弹窗-->
        <el-dialog     
            width="600px"
            v-model="dialog.show" 
            :title="dialog.title"
            :close-on-click-modal="false"> <!--点击外层关闭弹窗 -->
            <Editor 
            v-if="dialog.show" 
            v-model:show="dialog.show" 
            :id="dialog.id"
            @getTableData="getTableData"></Editor>
        </el-dialog>
    </div>
</template>

<script setup>
import { get, post } from '@/utils/axios'
import { reactive, ref } from 'vue'
import {ElMessageBox } from 'element-plus'
import Editor from './editor'
import {url} from './api'
const tableData = reactive({
  records: [],
  pages: 0,
  total: 0
})
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  name: ''
})
const searchValue = ref('')
const dialog = reactive({
  show: false,
  title: '',
  id: null
})
getTableData()
function add () {
  dialog.title = '添加科室'
  dialog.id = null
  dialog.show = true // 显示弹窗
}
function update (id) {
  dialog.title = '修改科室'
  dialog.id = id
  dialog.show = true // 显示弹窗
}
function search () {
  params.pageNo = 1
  params.name = searchValue.value
  getTableData()
}
function getTableData () {
  get(url.list, params, content => {
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}
function del (id,delmark){
  const text = delmark ? '确定要将该科室还原吗？' : '确定要将该科室删除吗？'
  ElMessageBox.confirm(text, '警告', {
    type: 'warning'
  }).then(() => {
    post(url.del, { id, delmark }, content => {
      getTableData()
    })
  }).catch(() => {})

}
</script>

<style lang='scss' scoped>
</style>